<template>
  <div class="service">
    <div class="service-top">
      <div class="service-top-cn">产品服务</div>
      <div class="service-top-en">PRODUCT SERVICE</div>
    </div>

    <div class="service-container">
      <div class="service-container-title">
        <p class="title-show1">
          在线解决Bug、毕业设计、小程序、Vue、SQL、JAVA、MySQL、uniapp、js、PHP等学习途中的问题和难点,
          马上咨询项目经理吧。
        </p>
      </div>
      <div class="fadeInTop service-container-top">
        <img src="../../assets/img/img1.png">
        <div class="container-title">小程序、公众号</div>
        <div class="container-text">微信公众号、小程序定制(商城类、教育类、 婚庆类、租房类)</div>
      </div>
      <div class="fadeInRight service-container-top">
        <img src="../../assets/img/img2.png">
        <div class="container-title">毕设开发</div>
        <div class="container-text">指导完成毕业设计项目、毕业论文,及提供答辩策略和答辩技巧</div>
      </div>
      <div class="fadeInTop service-container-top">
        <img src="../../assets/img/img3.png">
        <div class="container-title">APP定制开发</div>
        <div class="container-text">商城、淘客、外卖、社交、直播、跑腿、教育等APP定制开发</div>
      </div>
      <div class="fadeInRight service-container-top">
        <img src="../../assets/img/img4.png">
        <div class="container-title">H5定制</div>
        <div class="container-text">跨平台、无需下载、传播快、无需适配、快速增长用户流量</div>
      </div>

      <div class="fadeInTop service-container-top">
        <img src="../../assets/img/img5.png">
        <div class="container-title">办公系统</div>
        <div class="container-text">数字化档案、运行维护数据、流程自动化更快捷、 帮助用户或企业提高工作效率</div>
      </div>
      <div class="fadeInRight service-container-top">
        <img src="../../assets/img/img6.png">
        <div class="container-title">大屏数据展示</div>
        <div class="container-text">酷炫大屏管理驾驶舱，支持发布到多场景的数据大屏上进行可视化管控</div>
      </div>
      <div class="fadeInTop service-container-top">
        <img src="../../assets/img/img2.png">
        <div class="container-title">官网制作</div>
        <div class="container-text">在网站基础上结合SEO及网络推广,最大程度的提升企业营业额</div>
      </div>
      <div class="fadeInRight service-container-top">
        <img src="../../assets/img/img1.png">
        <div class="container-title">专业团队支持</div>
        <div class="container-text">已积累丰富的开发经验，并与多家高校、机构、企业结成紧密的战略伙伴</div>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},

  methods: {},

  mounted() {},
  created() {},
};
</script>

<style lang="scss" scoped>
.service {
  width: 100%;

  background-color: $color_bg;
  .service-top {
    width: 100%;
    text-align: center;
    margin: 20px 0 10px 0;
    .service-top-cn {
      font-size: 46px;
      font-weight: bold;
    }
    .service-top-en {
      margin-top: 20px;
      font-size: 26px;
      font-weight: bold;
      color: rgb(205, 171, 45);
    }
  }
}
.service-container {
  width: 100%;
  height: 73vh;
  overflow: scroll;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .service-container-title {
    width: 100%;
    background-color: #fff;
    height: 160px;
    position: relative;
    .title-show1 {
      width: 92%;
      margin: 0 auto;
      text-indent: 2em;
      font-size: 30px;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      left: 50%;
    }
  }
  .service-container-top {
    box-shadow: #ccc 0px 0px 10px;
    background-color: #fff;
    width: 47%;
    height: 350px;
    margin: 10px;
    border: 1px solid #f0f0f0;
    font-size: 25px;
    padding: 20px;
    img {
      height: 120px;
      width: 120px;
      position: relative;
      display: inline-block;
      left: 50%;
      transform: translateX(-50%);
    }
    .container-title {
      font-weight: 700;
      font-size: 25px;
      text-align: center;
    }
    .container-text {
      margin-top: 20px;
      color: #666;
      font-size: 27px;
    }
  }
  .container-right {
    box-shadow: #ccc 0px 0px 10px;
    background-color: #fff;
    width: 47%;
    height: 230px;
    margin-bottom: 10px;
    border: 1px solid #f0f0f0;
    font-size: 15px;
    padding: 10px;
  }
}
.fadeInTop {
  -webkit-animation: animatename 1s;
  animation: animatename 1s;
}
@keyframes animatename {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
.fadeInRight {
  -webkit-animation: animatename1 1s;
  animation: animatename1 1s;
}
@keyframes animatename1 {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
</style>
